<template>
    <el-container r :style="{ height: containerHeight + 'px' }">
        <!-- 左边放学院信息 -->
        <el-aside style="
            padding: 10px 0px 0px 0px;
            background: #fff;
            border-right: 1px solid #dfe6ec;"
            width="200px">
        <div class="a1">二级学院</div>
           <el-tree
           :data="academyList" :props="defaultProps" 
           @node-click="handleNodeClick"
           highlight-current
           >
           </el-tree>
        </el-aside>
        <!-- 主体-专业信息 -->
        <el-main>
            <el-header>
                <el-card>
                    <!-- 查询表单 -->
                    <el-form :model="searchModel" ref="searchForm" label-width="80px" :inline="true" size="small">
                        <el-form-item>
                            <el-input v-model="searchModel.professionName" placeholder="输入专业名查询"></el-input>
                        </el-form-item>
                        <el-button icon="el-icon-search" type="primary" size="small" @click="search(pageNo,pageSize)">查询</el-button>
                        <el-button icon="el-icon-refresh" size="small" @click="reset()">重置</el-button>
                        <el-button icon="el-icon-plus" type="success" size="small" @click="addProfession()">添加</el-button>
                    </el-form>
                </el-card>
            </el-header>
            <!-- 专业列表 -->
            <el-card>
            <el-table :data="professionList" border stripe style="width:100%, margin-bottom:20px" row-key="id">
                <el-table-column
                type="index"
                width="50"></el-table-column>
                <template v-for="item in tableProp">
                    <el-table-column
                    :prop="item.prop" :label="item.label"
                    :formatter="item.formatter">

                    </el-table-column>
                </template>
                <el-table-column align="center" label="操作">
                    <template slot-scope="scope">
                        <el-button icon="el-icon-edit" type="primary" size="mini" @click="updateProfession(scope.row)">编辑</el-button>
                        <el-button icon="el-icon-delete" type="danger" size="mini" @click="deleteProfession(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
            <!-- 分页工具栏 -->
            <el-pagination @size-change="assignSizeChange" @current-change="assignCurrentChange"
                    :current-page.sync="pageNo" :page-sizes="[10, 20, 30, 40, 50]" :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper" :total="total" background>
            </el-pagination>

            <!-- 添加和编辑弹框 -->
            <system-dialog :title="professionDialog.title"
             :visible="professionDialog.visible" :width="professionDialog.width"
             :height="professionDialog.height" @onClose="onClose"
             @onConfirm="onConfirm">
                <div slot="content">
                    <el-form :model="professionInfo" ref="professionInfoForm"
                        :rules="rules" label-width="160px">
                        <el-form-item label="专业名称" prop="professionName" style="height: 50px;margin-top: 20px;">
                            <el-input v-model="professionInfo.professionName" style="width:200px"></el-input>
                        </el-form-item>
                        <el-form-item label="设立时间" prop="professionBuildYear" style="height: 50px;">
                        <el-date-picker v-model="professionInfo.professionBuildYear" type="date" placeholder="选择日期"
                            format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" style="width:200px">
                        </el-date-picker>
                        </el-form-item>
                        <el-form-item label="所属学院" prop="academyId" style="height: 50px;">
                            <el-select v-model="professionInfo.academyId" clearable placeholder="请选择院长" style="width:200px">
                            <el-option
                            v-for="item in academyList"
                            :key="item.id"
                            :label="item.academyName"
                            :value="item.id"
                            >
                            </el-option>
                        </el-select>
                        </el-form-item>
                    </el-form>
                </div>
            </system-dialog>
        </el-main>
    </el-container>
</template>

<script>
import professionApi from "@/api/profession"
import academyApi from "@/api/academy"
import SystemDialog from "@/components/system/SystemDialog.vue"
import { async } from "q"


export default{
    name:'profession',
    components:{
        SystemDialog
    },
    data() {
        return {
            containerHeight:0,
            academyList:[],//学院列表
            professionList:[],//专业列表
            defaultProps: {
            children: 'children',
            label: 'academyName'
            },
            searchModel:{
                professionName:'',
                pageNo:null,
                pageSize:null,
            },
            tableProp:[
                { prop:'professionName', label:'专业名称'},
                { prop:'professionBuildYear', label:'专业设立年份'},
                { prop:'academyId', label:'所属学院名称',
                    formatter:value => {
                        const academyName = this.academyList.find(academy => academy.id === value.academyId)
                        return academyName !== undefined ? academyName.academyName : '-'
                    }
            },
            { prop:'updateTime', label:'最后修改时间'},
            ],
            professionDialog:{
                title:'',
                visible:false,
                width:500,
                height:250,
            },
            professionInfo:{
                id:null,
                professionName:'',
                professionBuildYear:'',
                academyId:null,
            },
            rules:{professionName: [{ required: true, trigger: "blur", message: "请输入专业名称" }],
            professionBuildYear: [{ required: true, trigger: "change", message: "请选择日期" }],
            academyId: [{ required: true, trigger: "change", message: "请选择学院" }],},
            pageNo:1,
            pageSize:10,
            total:0,
        }
    },
    methods: {
        async search(pageNo=1,pageSize=10){
            this.searchModel.pageNo = pageNo
            this.searchModel.pageSize = pageSize
            let res = await professionApi.getProfessionList(this.searchModel)
            if(res.success){
                this.professionList = res.data.records
                this.total = res.data.total
            }
        },
        reset(){
            this.searchModel = {}
            this.search()
        },
        addProfession(){
            this.$resetForm('professionInfoForm',this.professionInfo)
            this.professionDialog.title = '添加专业'
            this.professionDialog.visible = true
        },
        async getAcademyList(){
            let res = await academyApi.getAcademyList()
            if(res.success){
                this.academyList = res.data.records
            }
        },
        async getProfessionList(){
            let res = await professionApi.getProfessionList()
            if(res.success){
                this.professionList = res.data.records
                this.total = res.data.total
            }
        },
        async handleNodeClick(data){
            let res = await professionApi.getProfessionList({academyId:data.id})
            if(res.success){
                this.professionList = res.data.records
                this.total = res.data.total
            }
        },
        onClose(){
            this.professionDialog.visible = false
        },
        onConfirm(){
            this.$refs.professionInfoForm.validate(async (valid) => {
                if(valid){
                    let res = null
                    if(this.professionInfo.id === ''){
                        res = await professionApi.addProfession(this.professionInfo)
                    }else{
                        res = await professionApi.updateProfessionById(this.professionInfo)
                    }
                    if(res.success){
                        this.$message.success(res.message)
                        this.search()
                        this.professionDialog.visible = false
                    }else{
                        this.$message.error(res.message)
                    }
                }
            })
        },
        updateProfession(row){
            this.professionDialog.title = '修改专业信息'
            this.professionDialog.visible = true
            this.$objCopy(row,this.professionInfo)
        },
        async deleteProfession(row){
            let confirm = await this.$myconfirm("确定删除吗？")
            if(confirm){
                let res = await professionApi.deleteProfessionById({id:row.id})
                if(res.success){
                    this.search()
                    this.$message.success(res.message)
                }else{
                    this.$message.error(res.message)
                }
            }
        },
        assignSizeChange(size) {
            this.pageSize = size; //将每页显示的数量交给成员变量
            this.search(this.pageNo, size);
        },
        assignCurrentChange(page) {
            this.pageNo = page;
            //调用查询方法
            this.search(page, this.pageSize);
        },
    },
    created() {
        this.getAcademyList()
        this.getProfessionList()
        this.containerHeight = window.innerHeight - 85
    },
}
</script>

<style lang="scss">
    .a1{
        font-size: 20px;
        height: 50px;
        background-color: rgb(188, 188, 188);
        text-align: center;
        line-height: 50px;
        font-weight: 800 !important;
    }
    .el-tree-node__label {
        font-size: 18px;
    }
    .el-tree-node__content{
        height: 40px;
        width: 100%;
        text-align: center;
    }
    .el-tree-node__content :hover{
        //background-color: aquamarine !important;
    }
</style>